<template>
  <a-space wrap>
    <div
      w-80px
      text-12px
      :class="{ active: index === active }"
      @click="handleClickBox(item, index)"
      cursor-pointer
      hover:bg-gray-3
      h-80px
      bg-gray-100
      text-center
      line-height-80px
      v-for="(item, index) in list"
      :key="index"
    >
      {{ item.label }}
    </div>
  </a-space>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { getSystemFunctionList } from '@/api/common/common'
interface List {
  label: string
  value: string
  icon?: string
}

// 禁止修改label的值
const list = ref<Array<List>>([])
const active = ref<String | number>('')
const emit = defineEmits(['selectTableChange'])
function handleClickBox(val: List, index: number) {
  active.value = index
  console.log('选择的', { ...val, ___type: 'function-page' })
  emit('selectTableChange', { ...val, ___type: 'function-page' })
}
function getFunctionList() {
  getSystemFunctionList({}).then((res: any) => {
    console.log('###', res)
    list.value = res.data.map((i: any) => ({
      value: i.functionCode,
      label: i.functionName,
      frontAddress: i.frontAddress,
      backAddress: i.backAddress,
      functionType: i.functionType,
      subSystemId: i.subSystemId,
      functionCode: i.functionCode,
      functionName: i.functionName
    }))
  })
}
onMounted(() => {
  getFunctionList()
})
</script>

<style scoped>
.active {
  background: #d1d5db;
}
</style>
